<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*后代选择器*/
    ul li a {
        color: chartreuse;
    }

    ul li ul li {
        font-size: 30px;
    }

    ul li.hj {
        color: cornflowerblue;
    }

    /*子代选择器*/
    div > a {
        color: red;
    }

    div > p > a {
        color: slategrey;
        font-size: 20px;
    }

    .kds > a {
        color: burlywood;
        font-size: 25px;
    }

    /*兄弟选择器*/
    div + p /*选中div后面紧紧相邻的兄弟p元素*/
    {
        color: coral;
    }

    div ~ b /*选中div后面所有的兄弟b元素*/
    {
        color: fuchsia;
    }
    li+li/*选中li后面紧紧相邻的兄弟li元素*/{
        color: gray;
    }
</style>
<body>
<!--    后代选择器的内容-->
<ul>
    <li>后代选择器的内容:</li>
    <li class="hj">喝酒</li>
    <li>烫头</li>
    <li>
        <ul>
            <li><a href="#">踢球</a></li>
            <li>跑步</li>
            <li><a href="#">跳绳</a></li>
        </ul>
    </li>
</ul>
<hr>
<!--子代选择器的内容-->
<div>
    <p><a href="#">子代选择器的内容:</a></p>
    <div class="kds">
        <p><a href="#">游泳</a></p>
        <a href="#">打乒乓</a>
    </div>
    <a href="#">打游戏</a>
    <a href="#">看电视</a>
    <a href="#">听音乐</a>
</div>
<hr>
<!--兄弟选择器的内容-->
<div>兄弟选择器的内容:</div>
<p>张三</p>
<p>李四</p>
<p>王五</p>
<div>啊向</div>
<b>陆六</b>
<b>琪七</b>
<b>阿八</b>
<ul>
    <li>食九</li>
    <li>拾辣鸡</li>
    <li>十一</li>
</ul>
</body>
</html>